.cl-list {
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
	background-color: #fff;

	&--append {
		.cl-list__content {
			margin-right: 20rpx;
		}
	}

	&--disabled {
		background-color: #eee;
		color: #999;

		&:after {
			display: block;
			content: "";
			background-color: rgba(0, 0, 0, 0.1);
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
		}
	}

	&.is-border {
		border-bottom: 1rpx solid #eee;
	}

	&__icon,
	&__label,
	&__append {
		flex-shrink: 0;
	}

	&__label,
	&__content,
	&__append {
		display: flex;
		align-items: center;
		min-height: 80rpx;
		font-size: 26rpx;
	}

	&__swiper {
		display: flex;
		align-items: center;
		transition: all 0.3s;
		width: 100%;
	}

	&__container {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;

		&:active {
			background-color: #f7f7f7;
		}
	}

	&__icon {
		margin-right: 20rpx;

		img,
		image {
			display: block;
			height: 46rpx;
			width: 46rpx;
		}

		text {
			font-size: 46rpx;
		}
	}

	&__label {
		padding: 0 20rpx 0 0;
		font-size: 28rpx;
	}

	&__content {
		padding: 10rpx 0;
		flex: 1;

		&.is-justify-center {
			justify-content: center;

			picker {
				text-align: center;
			}
		}

		&.is-justify-end {
			justify-content: flex-end;

			picker {
				text-align: end;
			}
		}

		&.is-justify-space-between {
			justify-content: space-between;
		}

		&.is-justify-space-around {
			justify-content: space-around;
		}

		&.is-color-primary {
			color: $color-primary;
		}

		&.is-color-success {
			color: $color-success;
		}

		&.is-color-warning {
			color: $color-warning;
		}

		&.is-color-error {
			color: $color-error;
		}
	}

	&__append {
		i {
			display: inline-block;
		}

		[class^="cl-icon-"] {
			font-size: 30rpx;
		}
	}

	&__menu-left {
		transform: translateX(-100%);
		position: absolute;
		transition: left 0.3s;
	}

	&__menu-right {
		transform: translateX(100%);
		position: absolute;
		right: 0;
		transition: left 0.3s;
	}
}
